<template>
  <div class="container">
    <repairCommonTitle title="维养" iconName="maintenanceIcon" />
    <div class="content">
      <template v-for="item in dataPickerList" :key="item.name">
        <div class="itemBox">
          <div class="itemName">
            {{ item.name }}<span class="itemUnit">{{ item.unit }}</span>
          </div>
          <div class="barItem">
            <div
              class="percent"
              :style="{
                width: item.value + '%',
              }"
            ></div>
            <div class="barBg"></div>
            <div
              class="dot"
              :style="{
                left: item.value + '%',
              }"
            ></div>
          </div>
          <div class="itemValue">{{ item.value }}%</div>
        </div>
      </template>
    </div>
  </div>
</template>
<script setup>
import { nextTick, ref } from "vue";
import repairCommonTitle from "./repairCommonTitle.vue";

const dataPickerList = ref([
  { name: "防撞护栏钢管扶手油漆", unit: "(1次/季)", value: 0 },
  { name: "路铭牌保洁", unit: "(1次/月)", value: 0 },
  { name: "清理进水口", unit: "(6次/年)", value: 0 },
  { name: "疏通桥面泄水孔", unit: "(1次/月)", value: 0 },
  { name: "路铭牌保洁", unit: "(1次/月)", value: 0 },
  // { name: "清理进水口", unit: "(6次/年)", value: 0 },
]);

nextTick(() => {
  dataPickerList.value = [
    { name: "防撞护栏钢管扶手油漆", unit: "(1次/季)", value: 18.14 },
    { name: "路铭牌保洁", unit: "(1次/月)", value: 49.14 },
    { name: "清理进水口", unit: "(6次/年)", value: 68.89 },
    { name: "疏通桥面泄水孔", unit: "(1次/月)", value: 99.99 },
    { name: "路铭牌保洁", unit: "(1次/月)", value: 32.14 },
    { name: "清理进水口", unit: "(6次/年)", value: 25.14 },
  ];
});
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border: 3px solid #2366ad;
  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    .itemBox {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .itemName {
        // 当行省略
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 28%;
        height: 25px;
        line-height: 25px;
        color: #fff;
        font-size: 16px;

        .itemUnit {
          font-size: 12px;
        }
      }

      .barItem {
        position: relative;
        width: calc(75% - 100px);
        height: 10px;
        margin: 0 10px;
        .percent,
        .barBg {
          z-index: 1;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 10px;
          background-color: #185f87;
        }

        .percent {
          z-index: 2;
          background: linear-gradient(270deg, #fdea1a 0%, #574e00 100%);
          transition: width 0.5s ease-in-out;
        }

        .dot {
          position: absolute;
          top: -3px;
          z-index: 3;
          width: 3px;
          height: 16px;
          background: #ffffff;
          border-radius: 2px 2px 2px 2px;
          transition: left 0.5s ease-in-out;
        }
      }

      .itemValue {
        font-family: PangMenZhengDao;
        font-weight: 400;
        font-size: 20px;
        color: #ffffff;
        height: 22px;
        line-height: 22px;
      }
    }
  }
}
</style>